<script setup>
import props from './props'
defineOptions({
  name: 'LeeDialog',
})
defineProps(props)
const emit = defineEmits(['close'])
const handleClose = () => {
  emit('close')
}
</script>

<template>
  <transition name="dialog-fade">
    <div v-show="visible" class="lee-dialog_wrapper">
      <div class="lee-dialog" :style="{ width: width, marginTop: top }">
        <div class="lee-dialog_header">
          <slot name="title">
            <span class="lee-dialog_title">{{ title }}</span>
          </slot>
          <button class="lee-dialog_headerbtn">
            <lee-button
              icon="xmark"
              :border="false"
              @click="handleClose"
            ></lee-button>
          </button>
        </div>
        <div class="lee-dialog_body">
          <slot></slot>
        </div>
        <div class="lee-dialog_footer" v-if="$slots.footer">
          <slot name="footer"></slot>
        </div>
      </div>
    </div>
  </transition>
</template>
